<template>
  <view class="container-wrapper wrapperLayer">
    <view class="backTitlebar-wrapper colCen borderBox">
      <view class="fixedBox">
        <view class="topbarbox"></view>
        <view class="headerNavigationbar rowCenBet borderBox">
          <view class="backIcon rowCenSta" @click="backUrl()">
            <image src="@/static/images/home/return.png" mode=""></image>
          </view>
          <view class="pageTitle">
            订单详情
          </view>
          <view class="statebox rowCenEnd"  >
            <view class="stateText"  >

            </view>
          </view>
        </view>


      </view>
      <view class="placeBox">
        <view class="topbarbox"></view>
        <view class="placeemptybox">
        </view>
      </view>

    </view>


    <view class="bs-container">
      <u-empty class="no-data" text="未找到相关数据" mode="data" v-if="!data"></u-empty>
      <template v-else>
        <u-card :title="data.order_sn"  :sub-title="data.status_text" :sub-title-color="data.status==1?'green':'default'" :thumb="getIcon(data.type)" thumb-width="40"  >
          <view class="" slot="body">
            <view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
              <image :src="data.item_thumb" mode="aspectFill"></image>
              <view class="u-body-item-title u-line-3 margin-left">{{data.item_title}}</view>

            </view>

          </view>
          <view class="" slot="foot">
            <view class="foot-item">记录时间：{{data.add_time}}</view>
            <view v-if="data.settlement_time" class="foot-item" >结算时间：{{data.settlement_time}}</view>
            <view v-if="data.price" class="foot-item" >实付：￥{{data.price}} 元</view>
            <view v-if="data.commission" class="foot-item  commission " >佣金：￥{{data.commission}} 元</view>
			<view class=" btn-del bg-purple-light" ><u-icon name="trash-fill" size="45" color="#80808080" label="" @tap="del(data.order_sn)"></u-icon></view>
          </view>
        </u-card>
      </template>
    </view>

  </view>

</template>

<script>
import UImage from "../../../uview-ui/components/u-image/u-image";
import UEmpty from "../../../uview-ui/components/u-empty/u-empty";
import UCard from "../../../uview-ui/components/u-card/u-card";
export default {
  title:'订单详情',
  components: {UCard, UEmpty, UImage},
  data() {
    return {
      type: null,
      order_sn: '',
      data: null
    }
  },
  onLoad(e) {
	let query = e;
    if (query.hasOwnProperty('order_sn')){
      this.order_sn = query.order_sn;
      this.type = query.type
      this.getData()
    }
  },
  mounted(){
  
  },
  onShow() {
    //
  },
  //下拉
  onPullDownRefresh() {
    this.getData(true);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  //上拉
  onReachBottom(){
    this.getData();//加载
  },
  methods: {
    getData() {
      uni.showLoading()
      this.$http.post('union/api.order/getDetail', {
        order_sn: this.order_sn,
        type: this.type
      }, 'application/json').then(res => {
         this.data = res;
        uni.hideLoading()
      })

    },
    head_click(e){
      let orderSn = e.order_sn;
      if (orderSn) {
        uni.setClipboardData({
          data: orderSn,
          success: res => {
            uni.showToast({
              title: '订单号已复制',
              duration: 1000,
              icon: 'none'
            });
          }
        });
      }
    },
    getIcon(type){
      let icon;
      //订单类型，1-拼多多，2-小程序，3-亿起发，4-淘宝，5-京东，6-唯品会，7-其他，8-美团
      switch (type){
        case 1:
          icon = '../../../static/images/active/pdd.png';
          break;
        case 4:
          icon = '../../../static/images/active/tb.png';
          break;
      }
      return icon;
    },
    backUrl() {
      uni.navigateBack({
        delta: 1
      })
    },
   del(order_sn){
      uni.showModal({
        title:'确定删除吗？',
        content:'删除'+order_sn,
        success:(res)=>{
          if (res.confirm) {
            this.$nextTick(()=>{
              this.$http.post('union/api.order/del',{
                order_sn:order_sn
              },'application/json',true).then(res=>{
                this.getData(true)
              })
            })
          } else if (res.cancel) {
            console.log('已取消');
          }

        },
      })

    }
  }
}
</script>

<style lang="scss">
.container-wrapper {
  .backTitlebar-wrapper {
    .placeBox {
      .placeemptybox {
        height: 90rpx;
      }
    }

    .fixedBox {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      background-color: #FFFFFF;

      .headerNavigationbar {
        width: 100%;
        height: 90rpx;
        padding: 0 32rpx;

        .backIcon {
          width: 60rpx;
          height: 32rpx;
          z-index: 1;

          image {
            width: 17rpx;
            height: 32rpx;
          }
        }

        .pageTitle {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
        }

        .statebox {
          width: 60rpx;

          .stateText {
            font-size: 26rpx;
            font-weight: 400;
            color: #1520d0;
          }
        }
      }
    }
  }
  .bs-container{
    .no-data{
      margin-top: 80rpx;
    }

    .u-card-wrap {
      background-color: $u-bg-color;
      padding: 1px;
    }

    .u-body-item {
      font-size: 32rpx;
      color: #333;
      padding: 20rpx 10rpx;
    }

    .u-body-item image {
      width: 120rpx;
      flex: 0 0 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-left: 12rpx;
    }

    .btn-del{
      text-align: right;
    }

    .foot-item{
      margin-top: 16rpx;
    }
	.commission{
	  color: orange;
	  padding: 4rpx;
	}
  }

}
</style>
